<ion-header>
  <ion-navbar color="danger">
    <ion-title>
      Charts
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-card>
    <button ion-button (click)="updateData()">Update Pie Chart Data</button>
    <ion-card>
      <ion-card-header>
        Pie Chart
      </ion-card-header>
      <ion-card-content>
        <canvas #pieCanvas></canvas>
      </ion-card-content>
    </ion-card>
    <ion-card-header>
      Bar Chart
    </ion-card-header>
    <ion-card-content>
      <canvas #barCanvas></canvas>
    </ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>
      Doughnut Chart
    </ion-card-header>
    <ion-card-content>
      <canvas #doughnutCanvas></canvas>
    </ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>
      Half Doughnut Chart
    </ion-card-header>
    <ion-card-content>
      <canvas #halfDoughnutCanvas></canvas>
    </ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>
      Line Chart
    </ion-card-header>
    <ion-card-content>
      <canvas #lineCanvas></canvas>
    </ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>
      Radar Chart
    </ion-card-header>
    <ion-card-content>
      <canvas #radarCanvas></canvas>
    </ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>
      Polar Area Chart
    </ion-card-header>
    <ion-card-content>
      <canvas #polarCanvas></canvas>
    </ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>
      Bubble Chart
    </ion-card-header>
    <ion-card-content>
      <canvas #bubbleCanvas></canvas>
    </ion-card-content>
  </ion-card>
  <ion-card>
    <ion-card-header>
      Mixed Chart
    </ion-card-header>
    <ion-card-content>
      <canvas #mixedCanvas></canvas>
    </ion-card-content>
  </ion-card>
</ion-content>